<template>
  <div class="Login ">
    <div class="son  w-[520px]">
      <h1 class="text-center mb-[40px] text-[30px] text-light-50">管理员登录</h1>
      <el-form ref="login"
        :model="formLogin"
        :rules="rulesLogin"
        >
        <el-form-item prop="username" size="medium">
          <el-input class="bg-gray-800" v-model="formLogin.username" placeholder="请输入账号"  prefix-icon='el-icon-user'>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" size="medium">
          <el-input v-model="formLogin.password" placeholder="请输入密码" prefix-icon='el-icon-lock' show-password></el-input>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" @click="submitForm" class="w-full">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// login 验证码
import { authLogin } from '@/api/login'
export default {
  name: 'login',
  components: {},
  props: [],
  data () {
    return {
      // 用户输入
      formLogin: {
        code: '',
        username: null,
        password: null
      },
      // 验证
      rulesLogin: {
        username: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.formLogin.username = localStorage.getItem('username')
    this.formLogin.username = localStorage.getItem('password')
  },
  methods: {
    submitForm () {
      authLogin(this.formLogin).then(res => {
        if (res.errmsg === '成功') {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('username', res.data.adminInfo.nickName)
          localStorage.setItem('password', res.data.adminInfo.nickName)
          this.$router.push('/')
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.Login {
  position: relative;
  height: 100vh;
  background: rgb(45, 58, 74);
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
.el-input--medium .el-input__inner {
      height: 45px;
      background-color: rgb(45, 58, 74);
    }
</style>
